<template>
	<view class="content">
		<div class="swiperDiv">
			<div class="topMsg">添加家人健康卡信息</div>
		</div>
		<div class="bot-msg">

			<div class="bock">
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10">
							<span class="label">关系</span>
						</uni-col>
						<uni-col :span="14">
							<uni-data-select v-model="formData.value" :localdata="range" placeholder="请选择关系"
								@change="change"></uni-data-select>
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">姓名</span></uni-col>
						<uni-col :span="14">
							<input type="text" v-model="formData.age" placeholder="请输入姓名" />
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">国籍</span></uni-col>
						<uni-col :span="14">
							<input type="text" v-model="formData.age" placeholder="请输入国籍" />
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10">
							<span class="label">证件类型</span>
						</uni-col>
						<uni-col :span="14">
							<uni-data-select v-model="formData.value" :localdata="range" placeholder="请选择证件类型"
								@change="change"></uni-data-select>
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">证件号码</span></uni-col>
						<uni-col :span="14">
							<input type="text" v-model="formData.age" placeholder="请输入证件号码" />
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">出生日期</span></uni-col>
						<uni-col :span="14">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.single"
								@change="change2" />
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">性别</span></uni-col>
						<uni-col :span="14">
							<uni-data-select v-model="formData.value" :localdata="range" placeholder="请选择性别"
								@change="change"></uni-data-select>
						</uni-col>
					</uni-row>
				</div>
				<div class="bockForm">
					<uni-row>
						<uni-col :span="10"><span class="label">手机号</span></uni-col>
						<uni-col :span="14">
							<input type="text" v-model="formData.age" placeholder="请输入手机号" />
						</uni-col>
					</uni-row>
				</div>
				<div class="bockFormMsg">
					<div>
						<image src="../../static/common/img10.png" mode="" class="img"></image>
						温馨提示：
					</div>
					<div>
						请填写正确的个人信息，若填写的信息与实际不符，将影响正常就诊。 
						本平台暂不支持医保患者。
					</div>
				</div>
				<div class="botton" style="width: 100%;">
					<button type="primary" @click="submit" class="my-btn">立即绑定</button>
				</div>
			</div>

		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				formData: {
					value: '',
					age: '',
					name: '',
					single:''
				},

				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, "options")

		},
		methods: {

			change(e) {
				console.log("e:", e);
			},
			change2(e){
				console.log("e:", e);
			},
			

		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 144rpx;
		width: 100%;
		height: calc(100% - 144rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.topMsg {
		padding: 48rpx;
		font-size: 32rpx;
		color: #F2F6FE;
	}

	.bock {
		margin: 48rpx;
	}

	.bockForm {
		height: 64rpx;
		line-height: 64rpx;
		margin-bottom: 36rpx;
	}

	.label {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	/deep/ .uni-select,
	/deep/ .uni-easyinput__content-input,
	/deep/ .uni-date-x ,
	/deep/ input {
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 20rpx;
		border: 2rpx solid #1648CE;
		background: #F5FAFF;
	}
	/deep/ input {
		padding-left: 24rpx;
	}

	/deep/ .is-input-border , /deep/ .uni-date-x--border{
		border: none;
	}
	/deep/ .uni-date-x .icon-calendar{
		padding-top: 4rpx;
	}

	/deep/ .uni-select__input-placeholder,
	/deep/ input {
		color: #666666;
		font-size: 28rpx;
	}
	.bockFormMsg{
		margin-top: 72rpx;
		background-color: #F5FAFF;
		font-size: 32rpx;
		font-weight: 600;
		color:#1648CE;
		border-radius: 24px;
		padding: 36rpx;
	}
	.bockFormMsg .img{
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-bottom: 4rpx;
	}
</style>